<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
  .basic-card {
    position: relative;
    width: calc(100% - 80px);
    height: calc(100% - 275px);
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 60px 40px;
  }

  .info-div {
    padding: 20px 0;
    display: flex;
    align-items: center;
  }

  .info-div span {
    width: 100px;
  }

  .info-div a {
    text-decoration: none;
    color: #6c6a6a;
  }

  .info-div a:hover {
    color: #3498db;
  }


  .card-bottom {
    background-color: black;
    position: absolute;
    left: -0;
    bottom: 0;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .refer-web span {
    margin-left: 60px;
    color: white;
    font-size: 26px;
    font-weight: bolder;
  }

  .web-img {
    margin-right: 60px;
    width: 60px;
    height: 60px;
  }

  .web-img:hover {
    cursor: pointer;
  }
</style>

<div class="basic-card">
  <div class="info-div">
    <span>昵称：</span>
    <span>${user_key.nickname}</span>
  </div>
  <div class="info-div">
    <span>学号：</span>
    <span>${user_key.id}</span>
  </div>
  <div class="info-div">
    <span>身份：</span>
    <c:if test="${user_key.status}">
      <span>管理员</span>
    </c:if>
    <c:if test="${!user_key.status}">
      <span>学生</span>
      <a href="javascript:void(0)">申请成为管理员</a>
    </c:if>
  </div>

  <div class="card-bottom">
    <div class="refer-web">
      <span>Refer To Websites</span>
    </div>
    <div>
      <img class="web-img" src="assets/file_imgs/超星.png" alt="超星" onclick="toStart()">
    </div>
  </div>
</div>

<script>
  function toStart() {
    window.open('https://www.chaoxing.com/', '_blank')
  }
</script>